<template>
  <div class="mine">
    <header>
      <h3>饿了么</h3>
    <span class="iconfont icon-guanbi"></span>
    </header>
    <div class="zhanghao">
      <img :src="logo" alt="" />
      <div class="wd">
        <p>王昀升</p>
        <p>{{ phone | formatPhone }}</p>
      </div>
      <div class="zhang">账户设置</div>
    </div>
    <div class="ch">
      <h4>吃货卡</h4>
      <div>升级超级吃货卡，每月得无门槛红包，下单5倍返吃货豆</div>
    </div>
    <div class="hb">
      <div class="hongbao">
       <p> <span class="iconfont icon-hongbao"></span>红包</p>
        <div >7张今日到期</div>
      </div>
      <div class="yue">
            <p> <span class="iconfont icon-yue1"></span>红包</p>
          <div >0元</div>
     </div>
    </div>
    <div class="gj">
      <h3>常用工具</h3>
      <ul>
        <li @click="zouni">
            <span class="iconfont icon-daohangdizhi"></span>
            <p>我的地址</p>
        </li>
        <li>
               <span class="iconfont icon-kehufuwukefu"></span>
           <p> 我的客服</p>
        </li>
        <li>   <span class="iconfont icon-guanzhu-yiguanzhu"></span><p>店铺关注</p></li>
        <li>   <span class="iconfont icon-31guanzhu1"></span><p>评价有礼</p></li>
      </ul>
    </div>
    <div class="two">
      <div class="hy">
          <h3>邀请好友赚现金</h3>
        <span>最高15元</span>
        <div class="tu">
          <img :src="bao" alt="">
        </div>
        <div class="btn">
          <button>去邀请</button>
          <button>查佣金</button>
        </div>
        </div>
      <div class="fuwu">
        
           <h3>饿了么公众号</h3>
        <span>关注即可领取32元红包</span>
        <div class="tu">
          <img :src="liwu" alt="">
        </div>
        <div  class="bt">
          <button>去邀请</button>
         </div> 
        </div>
    </div>
  </div>
</template>

<script>
import logo from "../imgs/dota-kaer.jpg";
import liwu from "../../../assets/liwu.png"
import bao from "../../../assets/bao.png"
export default {
  data() {
    return {
      bao,
      liwu,
      logo,
      phone: "15829049064",
    };
  },
  filters: {
    formatPhone(p) {
      return p.slice(0, 3) + "****" + p.slice(-4);
    },
  },
  methods: {
     zouni(){
        this.$router.push("/editdizhi")
     }
  },
};
</script>

<style scoped>
.mine{
    background: #f5f5f5;
    padding: 15px;
    box-sizing: border-box;
}
li {
  list-style: none;
}
header {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.wd {
    margin-left:-40px ;
    margin-top: -10px;
}
.zhanghao {
  widows: 100%;
  display: flex;
  justify-content: space-between;
  height: 80px;
}
.zhanghao img{
    border-radius:50% ;
    width: 70px;
    height:70px;
}
.ch {
 width: 95%;
  margin: auto;
  height: 80px;
  background: #52aef4;
  box-sizing: border-box;
   margin: 10px;
    border-radius:15px;
    padding: 0 20px;
}
.ch :nth-child(2) {
  font-size: 5px;
  margin: -20px;
  padding:0 20px ;
   color: white;
}
.hb {
  widows: 95%;
  margin: auto;
  height: 80px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
    border-radius:15px 
}

h4{
   color: white;
   height: 30px;
   line-height: 30px;

}
.hongbao,
.yue {
  width: 40%;
  height: 100%;
  text-align: center;
  height: 40px;
  margin: 20px;
}
.yue div{
       margin-top:-8px ;
        font-size:10px ;
        color:#9e9e9e ;

}
.hb p{
    margin-top:-3px ;
}
.hongbao div{
      margin-top:-8px ;
        font-size:10px ;
        color:#9e9e9e ;
}
.hongbao span{
    font-size:20px ;
    color: red;
}
.yue span{
    font-size:20px ;
        color: red;
}
.gj {
  widows: 95%;
  margin: auto;
  background:white;
  border-radius:15px ;
  height: 100px;
  
}
.gj ul {
  display: flex;
  justify-content: space-around;
}
.gj ul li{
    text-align: center;
}
.gj ul li p{
    font-size:14px ;
}
.gj ul li span{

    font-size:25px 
}
.fuwu,
.hy {
    margin-top:10px ;
  width: 47%;
  height: 200px;
  background: white;
  border-radius: 15px;
}

.hy h3{
  text-align: center;
}
.fuwu {
  width: 47%;
  height: 200px;
}
.two {
  display: flex;
  justify-content: space-between;
}

.two img{
    width: 70px;
    background: pink;
text-align: center;
}
.tou>img{
  width: inherit;
}
.tu{
    text-align: center;
}
.zhang {
  text-align: center;
  line-height: 30px;
  margin: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 15px;
  background-color: #52aef4;
  color: #ffffff;
  /* font-size: 5px; */
}
.two button{
  background: white;
  border: 1px solid #999999;
  font-size: 12px;
  width: 60px;
  height: 30px;
  border-radius: 30px;
}
.two span{
    font-size:10px ;
    color: #a6a6a6;
}
.btn{
    display: flex;
    justify-content: space-between;
}
h3{
    height: 10px;
}
.bt{

    display: flex;
    justify-content: center;
}

header h3{
  color: #52aef4;
}
</style>